<template>
  <view>
    <view class="top-search flex-row flex-y-center">
      <view class="flex-grow-1 flex-y-center search-header">
        <view @tap="toggleShowSelect" class="select-box flex-grow-0 flex-x-center flex-y-center">
          {{selectList[selectedIndex]}}
          <image mode="widthFix" style="width:20upx;margin-left: 20upx" src="/static/icon-sort-down.png"/>
          <view v-if="hidden" class="selectlist">
            <block v-for="(item,index) in selectList" :key="index">
              <view @tap.stop="selectClick(index)" :class="index == selectedIndex ? 'active' : '' ">{{item}}</view>
            </block>
          </view>
        </view>
        <view class="flex-grow-1">
          <form class="form flex-row flex-y-center">
            <view class="flex-grow-0 flex-y-center inputBox">
              <input
                      style="width: 100%"
                      v-model="inputVal"
                      placeholder="输入关键词进行搜索"
                      confirm-type="search"
                      @confirm="inputConfirm"
                      @input="watchInput"
              />
              <view class="search_icon">
                <image style="width: 100%" mode="widthFix" src="/static/icon-search.png" />
              </view>
            </view>
          </form>
          <view @tap="clearInputVal" v-if="inputVal" class="close_icon">
            <image style="width: 100%" mode="widthFix" src="/static/icon-close2.png" />
          </view>
        </view>
      </view>
      <view @tap="inputConfirm" class="flex-grow-0 cancel">搜索</view>
    </view>
    <view class="hosts_box">
      <view>
        <text class="hosts-title">热词搜索</text>
      </view>
      <view class="search-history-list">
        <view v-if="index<8" v-for="(item,index) in hots_list" :key="index"
              class="search-history-item"
              @tap="hotsClick(item.name)">{{item.name}}
        </view>
      </view>
    </view>
    <view class="j_p_t_j">
      <view class="jptj_title">猜你喜欢</view>
    </view>
    <house-list @toDetails="toDetails" :item="item" v-for="(item,index) in houseList" :key="index"></house-list>
  </view>
</template>

<script>
  import {URI_GETSMALLHOUSELIST, URI_GETKEYWORDS} from "../../utils/api";
  import HouseList from "../../components/HouseList";

  export default {
    name: "tabSearch",
    components: {HouseList},
    data() {
      return {
        hots_list: [],
        houseList: [],
        inputVal: '',
        selectList: ['二手房', '租房', '新房'],
        selectedIndex: 0,
        hidden: false,
      }
    },
    onLoad() {
      this.getKeyWords();
      this.getSmallHouseList();
    },
    methods: {
      getKeyWords() {
        this.$ajax.get(URI_GETKEYWORDS).then((res) => {
          this.hots_list = res.data;
        })
      },
      getSmallHouseList() {
        this.$ajax.get(URI_GETSMALLHOUSELIST, {
          type: 1
        }).then((res) => {
          this.houseList = res.data.splice(res.data.length - 5, 5);
					
        })
      },
      hotsClick(name) {
        uni.navigateTo({
          url:`/pages/searchResult/searchResult?key=${name}&label=${this.selectedIndex}`
        })
      },
      selectClick(index){
        this.selectedIndex = index;
        this.hidden=false;
        if (index == 0) {
          this.setTitle('搜索二手房');
        } else if (index == 1) {
          this.setTitle('搜索租房');
        } else if (index == 2) {
          this.setTitle('搜索新房');
        }
      },
      setTitle(title) {
        uni.setNavigationBarTitle({
          title: title
        })
      },
      toggleShowSelect(){
        this.hidden=!this.hidden;
      },
      clearInputVal(){
        this.inputVal='';
      },
      inputConfirm(){
        if(this.inputVal){
          uni.navigateTo({
            url:`/pages/searchResult/searchResult?key=${this.inputVal}&label=${this.selectedIndex}`
          })
        }else {
          uni.showModal({
            title:'温馨提示',
            content:'请输入小区关键字',
            showCancel:false,
            confirmColor:'#ff474f'
          })
        }
      },
      watchInput(e){
        this.inputVal=e.detail.value;
      },
      toDetails(id,title){
        uni.navigateTo({
          url:"/pages/houseDetail/houseDetail?id="+id+"&title="+title
        })
      },
    }
  }
</script>

<style>
  page{
    background: #fff;
  }
  .top-search {
    background:#ff474f;
    height: 100upx;
    padding: 0 20upx;
  }
  .search-header{
    height: 60upx;
    background: #fff;
    border-radius: 4px;
    position: relative;
  }
  .close_icon {
    width: 32upx;
    height: 32upx;
    position: absolute;
    right: 15upx;
    top: 50%;
    transform: translateY(-50%);
  }
  .close_icon image{
    width: 32upx;
    height: 32upx;
  }

  .select-box{
    width: 84px;
    height: 100%;
    border-right: 1px solid #f2f2f2;
    color: #333;
    position: relative;
  }

  .selectlist{
    width: 100%;
    position: absolute;
    left: 0;
    top: 80upx;
    text-align: center;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 4px;
    line-height: 48upx;
    padding: 10upx 0;
  }
  .selectlist .active{
    color:red;
  }

  .form input {
    border: none;
  }
  .form .inputBox{
    position: relative;
    height: 64upx;
    border-radius: 30px;
  }
  .form .inputBox input{
    font-size: 26upx;
    width: 100%;
    height: 100%;
    background: transparent;
    padding-left: 66upx;
    caret-color: red;
  }
  .form .search_icon {
    width: 30upx;
    position: absolute;
    left: 15upx;
    top: 58%;
    transform: translateY(-50%);
  }
  .cancel {
    font-size: 30upx;
    margin-left: 30upx;
    font-weight: 500;
    color: #fff;
  }


  .hosts_box{
    padding: 24upx 34upx;
  }
  .hosts_box .hosts-title{
    font-size:30upx;
    color: #555555;
  }
  .hosts_box .delete-search-history{
    float: right;
    padding:15upx 20upx;
    margin-top: -15upx;
  }
  .search-history-list{
    padding: 24upx 0 0 0;
  }
  .search-history-list .search-history-item{
    color:#5c5c5c;
    display: inline-block;
    height: 64upx;
    line-height: 64upx;
    padding: 0 32upx;
    margin: 0 20upx 20upx 0;
    background: #f0f0f0;
    border-radius: 10upx;
  }

  .margin{
    width: 100%;
    height:14upx;
    background: #EFEFF4;
  }
  .j_p_t_j{

  }

  .jptj_title{
    font-size:30upx;
    color:#ff474f;
    border-bottom: 2upx solid #f2f2f2;
    padding:20upx;
    /*margin-bottom: 20upx;*/
  }
</style>